import React, { useState, useContext } from "react";
import queryApi from "../api/query";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  StyleSheet,
  Platform,
  StatusBar,
  Dimensions,
} from "react-native";
import { Entypo } from "@expo/vector-icons";

const dimen = Dimensions.get("window");
const width = dimen.width;

const Admin = () => {
  // const { materialData,editData } = useContext(AdminContext);
  const [category, setCategory] = useState("");
  const [type, setType] = useState("");
  const [density, setDensity] = useState("");

  const addMaterial = async () => {
    const material = {
      category,
      type,
      density,
    };
    const addData = await queryApi.post("/material", material);
    console.log("添加--- ", addData.data.data);
  };

  return (
    <View style={styles.container}>
      <View style={styles.addModal}>
        <View
          style={{
            flexDirection: "row",
            justifyContent: "center",
            alignItems: "center",
            marginBottom: 15,
          }}
        >
          <Entypo
            name="bucket"
            size={21}
            color="#F9be7d"
            style={{ marginBottom: 13, marginRight: 3 }}
          />
          <Text style={styles.bigTitle}>添加材料</Text>
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>类型:</Text>
          <TextInput
            style={{ marginLeft: 20, width: 200 }}
            value={category}
            textAlign="center"
            onChangeText={(category) => {
              console.log("类型---  ", category);
              setCategory(category);
            }}
            placeholder="请输入类型"
          />
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>型号:</Text>
          <TextInput
            style={{ marginLeft: 20, width: 200 }}
            value={type}
            textAlign="center"
            onChangeText={(type) => {
              console.log("型号---  ", type);
              setType(type);
            }}
            placeholder="请输入型号"
          />
        </View>
        <View style={styles.addItem}>
          <Text style={styles.title}>密度:</Text>
          <TextInput
            style={{ marginLeft: 20, width: 200 }}
            value={density}
            keyboardType="numeric"
            textAlign="center"
            onChangeText={(density) => {
              console.log("密度---  ", density);
              setDensity(density);
            }}
            placeholder="请输入型号"
          />
        </View>
      </View>
      <View
        style={{
          height: 45,
          width: 150,
          marginTop: 30,
        }}
      >
        <TouchableOpacity
          style={styles.confirm}
          onPress={() => {
            console.log("添加材料");
            addMaterial();
          }}
        >
          <Text style={styles.confirmText}>开始计算</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    marginTop: Platform.OS === "android" ? StatusBar.currentHeight : 0,
    height: "100%",
    backgroundColor: "#fff",
    alignItems: "center",
  },
  addModal: {
    marginTop: 80,
    justifyContent: "center",
    height: 400,
    backgroundColor: "#fff",
    padding: 20,
    width: width * 0.9,
    margin: width * 0.05,
    borderRadius: 20,
    elevation: 10, //设置阴影角度，通过这个设置有无阴影
    shadowOffset: {
      // 设置阴影偏移量
      width: 0,
      height: 0,
    },
    shadowRadius: 4, // 设置阴影模糊半径
    shadowOpacity: 0.1, // 设置阴影的不透明度
    shadowColor: "gray", // 设置阴影色
  },
  bigTitle: {
    fontSize: 22,
    color: "#22254c",
    alignSelf: "center",
    fontWeight: "900",
    marginBottom: 15,
  },
  addItem: {
    flexDirection: "row",
    justifyContent: "space-between",
    padding: 12,
    marginBottom: 5,
    alignItems: "center",
  },
  title: {
    fontSize: 16,
    color: "#22254c",
  },
  confirm: {
    borderRadius: 5,
    flex: 7,
    padding: 10,
    backgroundColor: "#F9be7d",
    alignItems: "center",
    justifyContent: "center",
    elevation: 2, //设置阴影角度，通过这个设置有无阴影
    shadowColor: "gray", // 设置阴影色
  },
  confirmText: {
    fontSize: 16,
    color: "#fff",
    fontWeight: "bold",
  },
});

export default Admin;
